<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工单管理系统 - Fallback测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .test-button {
            background: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #337ecc;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
        }
        .success {
            background: #f0f9ff;
            border: 1px solid #67c23a;
            color: #67c23a;
        }
        .error {
            background: #fef0f0;
            border: 1px solid #f56c6c;
            color: #f56c6c;
        }
        .info {
            background: #f4f4f5;
            border: 1px solid #909399;
            color: #909399;
        }
    </style>
</head>
<body>
    <h1>工单管理系统 - Fallback机制测试</h1>
    
    <div class="test-section">
        <h2>后端连接测试</h2>
        <button class="test-button" onclick="testBackendConnection()">测试后端连接</button>
        <div id="backend-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>模拟登录测试</h2>
        <button class="test-button" onclick="testMockLogin()">测试模拟登录</button>
        <div id="login-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>模拟注册测试</h2>
        <button class="test-button" onclick="testMockRegister()">测试模拟注册</button>
        <div id="register-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>模拟工单创建测试</h2>
        <button class="test-button" onclick="testMockTicketCreate()">测试模拟工单创建</button>
        <div id="ticket-result" class="result"></div>
    </div>

    <div class="test-section">
        <h2>本地存储数据查看</h2>
        <button class="test-button" onclick="viewLocalStorage()">查看本地存储</button>
        <div id="storage-result" class="result"></div>
    </div>

    <script>
        // 测试后端连接
        async function testBackendConnection() {
            const resultDiv = document.getElementById('backend-result');
            resultDiv.innerHTML = '正在测试后端连接...';
            
            try {
                const response = await fetch('http://localhost:8080/api/health', {
                    method: 'GET',
                    timeout: 3000
                });
                
                if (response.ok) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = '✅ 后端服务正常运行';
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = '❌ 后端服务异常: ' + response.status;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = '❌ 后端服务不可用: ' + error.message;
            }
        }

        // 测试模拟登录
        function testMockLogin() {
            const resultDiv = document.getElementById('login-result');
            resultDiv.innerHTML = '正在测试模拟登录...';
            
            try {
                // 模拟登录逻辑
                const credentials = { username: 'admin', password: 'admin123' };
                const mockUsers = {
                    admin: {
                        id: 1,
                        username: 'admin',
                        name: '系统管理员',
                        email: 'admin@example.com',
                        role: 'ADMIN',
                        avatar: null
                    }
                };
                
                if (credentials.username === 'admin' && credentials.password === 'admin123') {
                    const user = mockUsers.admin;
                    const token = 'mock-admin-token-' + Date.now();
                    
                    localStorage.setItem('token', token);
                    localStorage.setItem('user_info', JSON.stringify(user));
                    
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = '✅ 模拟登录成功<br>用户: ' + user.name + '<br>Token: ' + token;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = '❌ 模拟登录失败: 用户名或密码错误';
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = '❌ 模拟登录失败: ' + error.message;
            }
        }

        // 测试模拟注册
        function testMockRegister() {
            const resultDiv = document.getElementById('register-result');
            resultDiv.innerHTML = '正在测试模拟注册...';
            
            try {
                const userData = {
                    username: 'testuser',
                    email: 'test@example.com',
                    password: 'test123',
                    role: 'CUSTOMER'
                };
                
                const newUser = {
                    id: Date.now(),
                    username: userData.username,
                    email: userData.email,
                    password: userData.password,
                    name: userData.username,
                    role: userData.role || 'CUSTOMER',
                    avatar: null,
                    createdAt: new Date().toISOString()
                };
                
                // 保存到本地存储
                const existingUsers = JSON.parse(localStorage.getItem('registered_users') || '[]');
                existingUsers.push(newUser);
                localStorage.setItem('registered_users', JSON.stringify(existingUsers));
                
                resultDiv.className = 'result success';
                resultDiv.innerHTML = '✅ 模拟注册成功<br>用户ID: ' + newUser.id + '<br>用户名: ' + newUser.username;
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = '❌ 模拟注册失败: ' + error.message;
            }
        }

        // 测试模拟工单创建
        function testMockTicketCreate() {
            const resultDiv = document.getElementById('ticket-result');
            resultDiv.innerHTML = '正在测试模拟工单创建...';
            
            try {
                const payload = {
                    title: '测试工单',
                    description: '这是一个测试工单的描述',
                    descriptionDetail: '详细的测试工单描述',
                    priority: 'MEDIUM'
                };
                
                const mockTicket = {
                    id: Date.now(),
                    ticketNumber: 'TK' + Date.now(),
                    title: payload.title,
                    description: payload.description,
                    descriptionDetail: payload.descriptionDetail,
                    priority: payload.priority || 'MEDIUM',
                    status: 'OPEN',
                    category: 'system',
                    source: 'WEB',
                    customer: {
                        id: 1,
                        fullName: '当前用户'
                    },
                    createdBy: {
                        id: 1,
                        fullName: '当前用户'
                    },
                    assignedTo: null,
                    createdAt: new Date().toISOString(),
                    updatedAt: new Date().toISOString(),
                    dueDate: null,
                    resolvedAt: null,
                    closedAt: null,
                    estimatedHours: null,
                    actualHours: null,
                    satisfactionScore: null,
                    satisfactionComment: null,
                    internalNotes: null,
                    isPublic: true,
                    isEscalated: false,
                    escalationReason: null
                };
                
                // 保存到本地存储
                const existingTickets = JSON.parse(localStorage.getItem('mock_tickets') || '[]');
                existingTickets.unshift(mockTicket);
                localStorage.setItem('mock_tickets', JSON.stringify(existingTickets));
                
                resultDiv.className = 'result success';
                resultDiv.innerHTML = '✅ 模拟工单创建成功<br>工单号: ' + mockTicket.ticketNumber + '<br>标题: ' + mockTicket.title;
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = '❌ 模拟工单创建失败: ' + error.message;
            }
        }

        // 查看本地存储
        function viewLocalStorage() {
            const resultDiv = document.getElementById('storage-result');
            
            try {
                const data = {
                    token: localStorage.getItem('token'),
                    user_info: localStorage.getItem('user_info'),
                    registered_users: localStorage.getItem('registered_users'),
                    mock_tickets: localStorage.getItem('mock_tickets')
                };
                
                resultDiv.className = 'result info';
                resultDiv.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = '❌ 查看本地存储失败: ' + error.message;
            }
        }

        // 页面加载时自动测试后端连接
        window.onload = function() {
            testBackendConnection();
        };
    </script>
</body>
</html>
